<template>
	<van-popup v-model="showPopup" position="bottom">
		<div class="card-content">
			<div class="btn-wrap">
				<span>取消</span>
				<span class="submit-btn" @click="backTo">确定</span>
			</div>
			<div class="card-list">
				<div
					:class="['card-item', index === activeIdx ? 'active' : '']"
					v-for="(item, index) in list"
					:key="item.questionId"
					@click="selectOne(index)"
				>
					<span class="num">{{ index + 1 }}</span>
					<b class="dot" v-show="answerList[index] && answerList[index].finish"></b>
				</div>
			</div>
		</div>
	</van-popup>
</template>
<script>
export default {
	name: "AnswerCard",
	data() {
		return {
			showPopup: false,
			activeIdx: "",
		};
	},
	props: {
		list: {
			type: Array,
			default: function () {
				return [];
			},
		},
		answerList: {
			type: Array,
			default: function () {
				return [];
			},
		},
		playback: {
			type: Boolean,
			default: false,
		},
	},
	methods: {
		onClick() {
			if (!this.disabled) {
				this.$emit("click");
			}
		},
		selectOne(idx) {
			this.activeIdx = idx;
		},
		backTo() {
			if (this.playback) {
				this.$emit("backTo", this.activeIdx);
				this.showPopup = false;
			}
		},
	},
};
</script>

<style lang="scss">
.van-popup {
	background: #21202e;
	max-height: 50%;
	display: flex;
	flex-direction: column;
	.card-content {
	}
	.btn-wrap {
		height: 38px;
		display: flex;
		justify-content: space-between;
		font-size: 15px;
		span {
			padding: 11px 15px;
		}
		.submit-btn {
			color: #56baca;
		}
	}
	.card-list {
		display: flex;
		flex-wrap: wrap;
		flex: 1;
		overflow-y: scroll;
	}
	.card-item {
		border: 1px solid #2d2c3c;
		width: 14.28571%;
		height: 0;
		padding-top: 14.28571%;
		position: relative;
		&.active {
			background-color: #56baca;
		}
		.num {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.dot {
			height: 5px;
			width: 5px;
			position: absolute;
			top: 70%;
			left: 50%;
			transform: translate(-50%, 0);
			background-color: #56baca;
			border-radius: 50%;
		}
	}
	.card-content {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
}
</style>
